<template>
  <div class="page-container">
    <a-space :size="10" class="space-container">
      <a-button @click="count++" type="primary" class="btn">click</a-button>
      <a-button type="primary">Primary Button</a-button>
      <p>count is {{ count }}</p>
      <a-steps
        :current="1"
        :items="[
          {
            title: 'Finished',
            description,
          },
          {
            title: 'In Progress',
            description,
            subTitle: 'Left 00:00:08',
          },
          {
            title: 'Waiting',
            description,
          },
        ]"
      ></a-steps>
      <a-select
        ref="select"
        v-model:value="themeColor"
        style="width: 220px"
        @change="handleChange"
      >
        <a-select-option value="#1890ff">Blue</a-select-option>
        <a-select-option value="#f5222d">Red</a-select-option>
      </a-select>
      <input type="color" :value="color" @blur=" colorChange($event)"></input>
    </a-space>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const description = ref("This is a description.");
// const { msg } = defineProps<{
//   msg: {
//     type:String,
//     default:'默认消息'
//   },
// }>();
interface typeData {
  name: string;
  value: string;
}
const data = defineModel<typeData>()
const color = ref<string>("#f5222d");
import useStore from "@/pinia/index.ts";
const { user } = useStore();
const themeColor = ref("#1890ff");
const handleChange = (val: string): void => {
  user.setThemeColor(val);
};

const colorChange=(e:any)=>{
  color.value = e.target.value
  handleChange(color.value)
}
const count = ref(0);
</script>

<style scoped lang="less">
.page-container {
  .space-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
